<script setup>
</script>
<template>
  <view class="">
    <!-- 顶部图片 -->
    <view class="top-img">
      <image class="fengrui-img" src="../../static/my/bg15.svg" mode="aspectFill"></image>
    </view>

    <view class="sel-over-w">
      <!-- 头像 -->
      <view class="self-w">
        <view class="self-user-img">
          <image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
        </view>
        <view class="self-user-info">
          <view class="self-user-info-name">
            小程序用户
          </view>
          <view class="self-user-info-describe">
            hahhaha
          </view>
        </view>
      </view>

      <!-- me-svg -->
      <view class="me-svg">
        <button class="me-sbg-btn" hover-class="fengrui-li-hover" @tap="allTag()">
          <view class="Vajra-list-img">
            <image class="fengrui-img" src="../../static/my/star.svg" mode="aspectFill"></image>
          </view>
          <view class="Vajra-list-font">
            知识星球
          </view>
        </button>
        <button class="me-sbg-btn" hover-class="fengrui-li-hover"  @tap="popupSever()">
          <view class="Vajra-list-img">
            <image class="fengrui-img" src="../../static/my/poster.svg" mode="aspectFill"></image>
          </view>
          <view class="Vajra-list-font">
            关注官方
          </view>
        </button>
        <button class="me-sbg-btn" hover-class="fengrui-li-hover" open-type="contact" send-message-title="个人中心"
                send-message-path="pages/me/me" show-message-card="true">
          <view class="Vajra-list-img">
            <image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFill"></image>
          </view>
          <view class="Vajra-list-font">
            咨询客服
          </view>
        </button>
      </view>
    </view>

    <!-- 判断微信流量主 -->
<!--     #ifdef MP-WEIXIN
    <block v-if="wxSet != ''">
      <view class="" style="margin: 30rpx 30rpx;">
        <ad :unit-id="wxSet.wx_video" ad-type="video" ad-theme="white"></ad>
      </view>
    </block>
     #endif -->

    <!-- 功能列表 -->
    <view class="metergasis">
      <view class="metergasis-li" hover-class="fengrui-li-hover" @tap="clearTap()">
        <view class="metergasis-li-img">
          <image class="fengrui-img" src="../../static/my/cache.svg" mode="aspectFill"></image>
        </view>
        <view class="metergasis-li-h">
          清除缓存
        </view>
        <view class="metergasis-li-rgth">
          <image class="fengrui-img" src="../../static/my/more.svg" mode=""></image>
        </view>
      </view>

      <view class="metergasis-li" hover-class="fengrui-li-hover" @tap="abouTap()">
        <view class="metergasis-li-img">
          <image class="fengrui-img" src="../../static/my/about.svg" mode="aspectFill"></image>
        </view>
        <view class="metergasis-li-h">
          关于程序
        </view>
        <view class="metergasis-li-rgth">
          <image class="fengrui-img" src="../../static/my/more.svg" mode=""></image>
        </view>
      </view>
    </view>

    <!-- 占位符号 -->
    <view style="height: 100rpx;"></view>
  </view>
</template>


<style scoped lang="scss">
/* 顶部图片 */
.top-img {
  width: 100%;
  height: 340rpx;
  overflow: hidden;
}


.feng-img {
  height: 100%;
  margin: auto;
  display: block;
}

.titel-h {
  font-size: 38rpx;
  margin: 30rpx 0rpx;
  position: relative;
}

.titel-h:after {
  content: '';
  position: absolute;
  bottom: -14rpx;
  left: 0px;
  width: 96rpx;
  height: 8rpx;
  border-radius: 200rpx;
  background: linear-gradient(90deg, rgba(55, 110, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

/* 功能列表 */
.metergasis-li-rgth {
  width: 50rpx;
  height: 50rpx;
  overflow: hidden;
  flex-shrink: 0;
  position: absolute;
  right: 0rpx;
  top: 50%;
  transform: translate(0%, -50%);
}

.metergasis-li-h {
  grid-row: 1;
  margin-left: 30rpx;
  font-size: 30rpx;
}

.metergasis-li-img {
  height: 52rpx;
  width: 52rpx;
  border-radius: 100rpx;
  flex-shrink: 0;
}

.metergasis-li {
  padding: 24rpx 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.metergasis {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  margin: 48rpx 0rpx;
  padding: 2rpx;
  margin: 30rpx;
}

/* me-svg */
.Vajra-list-font {
  color: #807C7C;
  font-size: 20rpx;
}

.Vajra-list-img {
  height: 60rpx;
  width: 60rpx;
  overflow: hidden;
  margin: auto;
}

.me-sbg-btn {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 25%;
  padding: 14rpx 0rpx;
}

.me-svg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

/* 流量主广告或者图片 */
.me-ads {
  border-radius: 18rpx;
  margin: 48rpx 0rpx;
  overflow: hidden;
  margin: 30rpx;
}

/* 头像 */
.self-user-updata {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 48rpx;
}

.self-user-info-describe {
  color: #807C7C;
  font-size: 24rpx;
  margin-top: 18rpx;
}

.self-user-info-name {
  font-size: 48rpx;
  flex-grow: 1;
}

.self-user-info {
  margin: 0rpx 24rpx;
}

.self-user-img {
  height: 120rpx;
  width: 120rpx;
  border-radius: 100rpx;
  overflow: hidden;
  flex-shrink: 0;
}

.self-w {
  display: flex;
  justify-content: flex-start;
  padding: 48rpx 26rpx;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
}

.sel-over-w {
  overflow: hidden;
  background-color: #FFFFFF;
  margin: 0rpx 28rpx;
  border-radius: 16rpx;
}

/* 全局 */
.center {
  margin: 48rpx;
}

page {
  background-color: #f7f7f7;
  overflow-x: hidden;
}

.fengrui-img {
  height: 100%;
  width: 100%;
}

button {
  padding-left: 0rpx;
  padding-right: 0rpx;
  background-color: #FFFFFF;
}

.button-hover {
  background-color: #FFFFFF !important;
}

button::after {
  border: 0px solid rgba(0, 0, 0, .2);

}

/* 暗黑模式下应用的样式 */
@media (prefers-color-scheme: dark) {
  page {
    background: #161616;
  }

  .sel-over-w,
  .self-w,
  .metergasis,
  .me-svg,
  .me-sbg-btn,
  button {
    background-color: #202020;
  }
}
</style>
